<template>
  <div class="driverCheck">
    <div>
      <!-- 详情内容 -->
      <div class="details-content">
        <!-- 身份证 -->
        <div style="display: flex;flex-wrap: nowrap;height: 300px;">
          <!-- 身份证 左侧-->
          <div class="driving-license-left">
            <div class="driving-license-title">身份证</div>
            <div
              style="margin-left: 20px;display: flex;flex-wrap: nowrap;justify-content:flex-start;width: 90%;"
            >
              <div>
                <h4>正面</h4>
                <div class="info">
                  <div>
                    <img :src="supplyUrl(idInfoForm.frontImg)">
                  </div>
                </div>
              </div>
              <div>
                <h4 style="margin-left: 40px;">背面</h4>
                <div class="info" style="margin-left: 40px;">
                  <div>
                    <img :src="supplyUrl(idInfoForm.backImg)">
                  </div>
                </div>

              </div>
            </div>
          </div>
          <!-- 身份证 右侧-->
          <div class="driving-license-right">
            <div style="margin: 20px;">
              <el-form label-width="120px">
                <el-row :gutter="24">
                  <el-col :span="12">
                    <el-form-item label="手机号：">
                      <span>{{ driverInfoForm.mobile }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="性别：">
                      <span>{{ idInfoForm.gender }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="24">
                  <el-col :span="12">
                    <el-form-item label="姓名：">
                      <span>{{ driverInfoForm.name }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="民族：">
                      <span>{{ idInfoForm.nationality }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="24">
                  <el-col :span="12">
                    <el-form-item label="身份证住址：">
                      <span>{{ idInfoForm.address }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="有效期起：">
                      <span>{{ idInfoForm.usefulStartTime }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="24">
                  <el-col :span="12">
                    <el-form-item label="身份证号码：">
                      <span>{{ idInfoForm.id }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="有效期至：">
                      <span>{{ idInfoForm.usefulEndTime }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="24">
                  <el-col :span="12">
                    <el-form-item label="发证机关：">
                      <span>{{ idInfoForm.sendCertificateOffice }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </div>
        </div>
        <!-- 驾驶证 -->
        <div style="display: flex;flex-wrap: nowrap;height: 300px;">
          <!-- 驾驶证 左侧-->
          <div class="driving-license-left">
            <div class="driving-license-title">驾驶证图片</div>
            <div class="info">
              <div style="margin-left: 20px;">
                <img :src="supplyUrl(driverInfoForm.drivingLicenseImg)">
              </div>
            </div>

          </div>
          <!-- 驾驶证 右侧-->
          <div class="driving-license-right">
            <div style="margin: 20px;">
              <el-form
                label-width="135px"
              >
                <el-row :gutter="24">
                  <el-col :span="15">
                    <el-form-item label="机动车驾驶证号：">
                      <span>{{ driverInfoForm.drivingLicenseNo }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="24">
                  <el-col :span="15">
                    <el-form-item label="有效期起：">
                      <span>{{ driverInfoForm.usefulStartTime }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="24">
                  <el-col :span="15">
                    <el-form-item label="有效期至：">
                      <span>{{ driverInfoForm.usefulEndTime }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="24">
                  <el-col :span="15">
                    <el-form-item label="准驾车型：">
                      <span> {{ driverInfoForm.readyDriveType }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="24">
                  <el-col :span="15">
                    <el-form-item label="发证机关：">
                      <span>{{ driverInfoForm.sendCertificateOffice }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </div>
        </div>
        <!-- 从业资格证 -->
        <div style="display: flex;flex-wrap: nowrap;height: 220px;">
          <!-- 道路运输证 左侧-->
          <div class="driving-license-left">
            <div class="driving-license-title" style="width: 150px;">从业资格证照片</div>
            <div class="info">
              <div style="margin-left: 20px;">
                <img :src="supplyUrl(driverInfoForm.employedCertificationImg)">
              </div>
            </div>
          </div>
          <!-- 从业资格证 右侧-->
          <div class="driving-license-right">
            <div style="margin: 20px;width: 75%;">
              <el-form
                label-width="170px"
              >
                <el-form-item label="道路从业资格证编号：">
                  <span>{{ driverInfoForm.employedCertificationNo }}</span>
                </el-form-item>
                <el-form-item label="从业资格证类别：">
                  <span>{{ driverInfoForm.employedCertificationType }}</span>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
        <div style="height: 260px;margin-top: 20px;">
          <div class="driving-license-title">操作日志</div>
          <div style="margin: 20px;">
            <el-table v-loading="listLoading" :data="list" highlight-current-row style="width: 100%">
              <el-table-column type="index" width="50" />
              <el-table-column property="status" label="状态" width="120" />
              <el-table-column property="name" label="操作人" width="120" />
              <el-table-column property="lastUpdateTime" label="操作时间" />
              <el-table-column property="remark" label="备注" />
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { driverDetail } from '@/api/tms/driver'
import { supplyUrl } from '@/api/common/file'

export default {

  data() {
    return {
      list: [],
      params: {},
      idInfoForm: {},
      driverInfoForm: {},
      listLoading: false
    }
  },
  created() {
    this.params = this.$route.params
    this.detail()
  },
  methods: {
    supplyUrl,
    detail() {
      driverDetail(this.params.id).then((response) => {
        this.idInfoForm = response.tmsIdentityCardInfoPo
        this.driverInfoForm = response.tmsDriverPo
      })
    }
  }

}
</script>
<style lang="scss">
.driverCheck {
	padding: 30px 0;

	.details-content {
		border: 1px solid #E4E4E4;
		width: 95%;
		margin: 0 auto;
		height: 1150px;
	}

	.driving-license-left {
		border-bottom: 1px solid #E4E4E4;
		border-right: 1px solid #E4E4E4;
		width: 35%;
	}

	.driving-license-title {
		border-left: 2px solid #FFB500;
		width: 100px;
		text-align: center;
		font-size: 16px;
		margin: 20px;
	}

	.driving-license-right {
		border-bottom: 1px solid #E4E4E4;
		width: 65%;
		/* margin: 20px; */
	}

	.audit-btn {
		text-align: center;
	}

	.dialog-footer {
		margin-top: 30px;
		display: flex;
		justify-content: center;
	}
}
img{
	width: 140px;
	height: 140px;
}
</style>
